<template>
  <div>
    <download-excel
        :data   = "tableData"
        :fields = "json_fields"
        name = "用户统计列表">
      <el-button type="primary" style="background-color: navy" @click="getExcel" icon="el-icon-bottom">导出</el-button>
    </download-excel>
    <div>
      <el-table :data="users.slice((currentPage-1)*pagesize,currentPage*pagesize)" border stripe
                @selection-change="selsChange">
        <el-table-column label="序号" prop="id"/>
        <el-table-column label="月份" prop="month"/>
        <el-table-column label="楼栋" prop="floor"/>
        <el-table-column label="照明用电量小计(度)" prop="lighting"/>
        <el-table-column label="空调用电量小计(度)" prop="conditioner"/>
        <el-table-column label="总用电量(度)" prop="total"/>
        <el-table-column label="总费用(元)" prop="money"/>
        <el-table-column label="电费合计" prop="money"/>
      </el-table>
    </div>
    <div class="pagei">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'xiezilou',
  data () {
    return {
      dialogVisible: false,
      conditioner: '',
      lighting: '',
      schArr: [], // 分页数据源
      pagesize: 3,
      currentPage: 1,
      total: 0,
      tableData: [],
      search: '',
      search1: '',
      activeName: 'a',
      radio: '1',
      users: {},
      ruleForm1: {
      },
      ruleForm: {
        tableData: [],
        dialogVisible: false,
        dialogUpdate: false,
        pageSize: 5,
        currentPage: 1,
        total: 0,
        disablePage: false
      },
    }
  },
  created () {
    const that = this
    this.getPages()
    // this.getPages();
    this.axios.post('http://localhost:8001/queryFloor')
      .then(function (response) {
        console.log(response)
        that.users = response.data
      })
  },
  methods: {
    getExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../router/Export2Excel.js')
        const tHeader = ['序号', '月份','楼栋','照明用电量小计(度)','空调用电量小计(度)','总用电量(度)','总费用(元)','电费合计']
        const filterVal = ['id', 'month','floor','lighting','conditioner','total','money','money']
        const list = this.users
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '写字楼数据表格')
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    jisuan (){
      this.ruleForm1.total = this.ruleForm1.total = (this.ruleForm1.lighting*1) + ( this.ruleForm1.conditioner *1)
      this.jisuan1()
    },
    jisuan1 (){
      this.ruleForm1.money = this.ruleForm1.total = (this.ruleForm1.lighting*1) + ( this.ruleForm1.conditioner *1)
    },
    handleSizeChange (val) {
      this.getPageData()
      var s = this
      console.log(`每页 ${val} 条`)
      s.pagesize = val
      s.getPageData()
      console.log(s.pagesize)
    },
    handleCurrentChange (val) {
      this.getPageData()
      var ss = this
      console.log(`当前页: ${val}`)
      ss.currentPage = val
      ss.getPageData()
      console.log(ss.currentPage)
    },
    getPageData () {
      console.log('是否yes')
      var thats = this
      let start = (this.currentPage - 1) * this.pagesize
      let end = start + this.pagesize
      this.schArr = thats.users.slice(start, end)
      this.total = thats.users.length
    },
    getPages () {
      this.axios.post('http://localhost:8001/getCount').then(response => {
        this.total = response.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>

</style>
